/**
`useTransition`  是 React 18 中新增的一个 Hook，用于处理状态更新时的过渡效果，特别是在处理异步状态更新时。它可以帮助开发者在更新 UI 时提供更好的用户体验，避免界面卡顿。
  1. 基本概念
  -  `useTransition`  允许你标记某些状态更新为“过渡”状态，这意味着这些状态更新可以是非紧急的，可以在后台进行处理。
  - 当状态更新被标记为过渡时，React 会优先处理紧急的更新（如用户输入），然后再处理过渡更新。

  2. 使用方式
  使用  `useTransition`  非常简单，它返回一个  `isPending`  状态和一个  `startTransition`  函数。

   示例：
  import React, { useState, useTransition } from 'react';

  const MyComponent = () => {
    const [isPending, startTransition] = useTransition();
    const [inputValue, setInputValue] = useState('');
    const [list, setList] = useState([]);

    const handleChange = (event) => {
      const value = event.target.value;
      setInputValue(value);

      // 使用 startTransition 来标记这个状态更新为过渡
      startTransition(() => {
        const newList = Array.from({ length: 10000 }, (_, i) => `${value} ${i}`);
        setList(newList);
      });
    };

    return (
      <div>
        <input value={inputValue} onChange={handleChange} />
        {isPending && <span>Loading...</span>}
        <ul>
          {list.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>
      </div>
    );
  };
  3. 特点
  - 优先级管理： `useTransition`  允许开发者在处理状态更新时设置优先级，确保重要的更新（如用户输入）不会被延迟。
  - 异步更新：可以将一些状态更新标记为非紧急的，从而提高用户体验，避免 UI 卡顿。
  - 加载指示器：可以根据  `isPending`  状态显示加载指示器，告知用户正在进行的操作。

  4. 注意事项
  - 适用场景： `useTransition`  适合用于处理不紧急的状态更新，例如列表渲染、大量数据处理等场景。
  - 性能优化：在使用  `useTransition`  时，确保过渡更新不会导致性能问题，合理使用可以显著提升用户体验。

  5. 总结
  `useTransition`  是一个强大的工具，帮助开发者在 React 应用中处理异步状态更新。通过标记过渡更新，开发者可以优化 UI 渲染，确保重要的用户交互不会受到影响。合理使用  `useTransition`  可以显著提升应用的响应性和用户体验。
 */
import React, { memo, useState, useTransition, useDeferredValue } from 'react'
import namesArray from './namesArray'

const App = memo(() => {
  const [showNames, setShowNames] = useState(namesArray)
  const [pending, startTransition] = useTransition()

  // useDeferredValue: 延迟更新
  const deferedShowNames = useDeferredValue(showNames)

  function valueChangeHandle(event) {
    startTransition(() => {
      const keyword = event.target.value
      const filterShowNames = namesArray.filter(item => item.includes(keyword))
      setShowNames(filterShowNames)
    })
  }

  function valueChangeHandle2(event) {
    const keyword = event.target.value
    const filterShowNames = namesArray.filter(item => item.includes(keyword))
    setShowNames(filterShowNames)
  }
  
  return (
    <div>
      {/* <h3>01_useTransition的使用</h3>
      <input type="text" onInput={valueChangeHandle}/>
      <h4>用户名列表: {pending && <span>data loading</span>} </h4>
      <ul>
        {
          showNames.map((item, index) => {
            return <li key={index}>{item}</li>
          })
        }
      </ul> */}

      <h3>02_useDeferredValue的使用</h3>
      <input type="text" onInput={valueChangeHandle2}/>
      <h4>用户名列表: </h4>
      <ul>
        {
          deferedShowNames.map((item, index) => {
            return <li key={index}>{item}</li>
          })
        }
      </ul>
    </div>
  )
})

export default App